<template>
  <div class="dialog" v-show="isShow">
    <div class="dialog-wrap">
      <div class="dialog-header">
        <slot name="header" />
        <span class="dialog-header-close" @click="close">x</span>
      </div>
      <div class="dialog-body">
        <slot />
      </div>
      <div class="dialog-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>


<script>
import Swiper from "swiper";
export default {
  name: "selectDialog",
  props: {
    isShow: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    close() {
      this.$emit("update:isShow", false);
    },
  },
  watch: {
    isShow() {
      this.$nextTick(() => {
        var swiper = new Swiper(".small-picture-container", {
          // loop: true,
          spaceBetween: 10,
          slidesPerView: 4,
          // freeMode: true,
          // watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".picture-container", {
          // direction: "vertical", // 垂直切换选项
          // height: 151,
          loop: true, // 循环模式选项
          // spaceBetween: 0,
          // slidesPerView: 1,
          // 如果需要分页器
          thumbs: {
            swiper: swiper,
          },
          pagination: {
            el: ".swiper-pagination",
          },
          // autoplay: true,
          // delay: 2000,
          // disableOnInteraction: false,

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(51, 51, 51);
  .dialog-wrap {
    box-sizing: border-box;
    // height: 100%;
    padding: 30px 40px 30px 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    // height: 537px;
    text-align: center;
    background-color: white;
    transform: translate(-50%, -50%);
    .dialog-header {
      font-size: 18px;
      font-weight: 1800px;
      margin-bottom: 15px;
      text-align: left;
      h2 {
        display: inline-block;
      }
      .dialog-header-close {
        font-size: 30px;
        color: #666a6d;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
      }
    }
    .dialog-body {
      text-align: center;
      margin-bottom: 20px;
      .picture-container {
        margin: 0 35px;
        width: 450px;
        height: 450px;
        display: inline-block;
        overflow: hidden;
        ul {
          // width: 750px;
          li {
            display: inline-block;
            width: 450px;
            height: 450px;
            background-color: #f0f0f0;
          }
        }
      }
    }
    .dialog-footer {
      text-align: center;
      .small-picture-container {
        // width: ;
        ul {
          display: inline-block;
          // margin-top: 20px;
          overflow: hidden;
          text-align: center;
          width: 450px;
          margin: 0 auto;
          .smallImg {
            border: 2px solid #b29f7c;
          }
          .swiper-slider {
            width: 66px;
            height: 66px;
            // float: left;
            display: inline-block;
            // margin-left: 10px;
            background-color: #f0f0f0;
          }
          :first-child {
            margin-left: 0;
          }
        }
      }
    }
  }
}
</style>

